<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性盒布局</title>
		<style type="text/css">
			.wrap {
				margin: 50px auto;
				width: 550px;
				height: 550px;
				border: 2px solid #0000FF;
				display: flex;
				/*主轴的方向*/
			/* 	flex-direction:column; */ /*默认值 row*/
				/* 默认值 flex-start*/
				justify-content:space-evenly ;	
				/* align-items: center; 设置单行*/ 
				flex-wrap: wrap;
				align-content:space-evenly ;/*设置多行的副轴对齐方式*/
			}
			.wrap div {
				width: 150px;
				height: 150px;
				text-align: center;
				font-size: 40px;
				color: #fff;
				line-height: 100px;
			}
			.wrap div:first-child {
				background-color: pink;
			}
			.wrap div:nth-child(2) {
				background-color: slategray;
			}
			.wrap div:nth-child(3) {
				background-color: lightblue;
			}
			.wrap div:nth-child(4) {
				background-color: goldenrod;
			}
			.wrap div:nth-child(5) {
				background-color: blueviolet;
			}
			.wrap div:nth-child(6) {
				background-color: lightblue;
			}
			.wrap div:nth-child(7) {
				background-color: goldenrod;
			}
			.wrap div:nth-child(8) {
				background-color: blueviolet;
			}
			.wrap div:last-child {
				background-color: salmon;
			}
		</style>
	</head>
	<body>
		<!-- 弹性盒布局
		 布局的时候非常方便
		 给父元素加的属性
		 声明弹性盒模型   display: flex 
		 flex-direction: column /row /row-reverse /column-reverse;
		 主轴方向对齐方式
		 justify-content: flex-start /  flex-end /center;
		  主轴方向分布方式
		   justify-content: space-between /space-around /space-evenly
		 副轴的对齐方式
		 align-items: flex-start /  flex-end /center;
		 -->
		 <div class="wrap">
			 <div>1</div>
			 <div>2</div>
			 <div>3</div>
			<div>4</div>
			<div>2</div>
			 <div>3</div>
			<div>4</div>
			 <div>5</div>
			 <div>6</div>
		 </div>
	</body>
</html>
